<div id="viewer-container"></div>
<script>
  CTS.ready(() => {
    let gui = new dat.GUI()
    let viewer = new CTS.Viewer('viewer-container') //初始化场景
    let modeloader = new CTS.ModelLoder(viewer)
    viewer.camera.position.set(0, 0, 2) //设置相机位置
    modeloader.loadModelToScene('resources/model/hello.glb') //加载模型
    const ambientLight = new CTS.AmbientLight(0xFFFFFF, 3)    //全局光
    viewer.scene.add(ambientLight)

    function updateCamera() {
      viewer.camera.position.set(params.positionX, params.positionY, params.positionZ)
      //后来在网上找到原因，原来是我在页面上使用了controls控件，影响了照相机camera的使用，所以需要同时赋值控制器才行
      let v = new CTS.Vector3(params.lookX, params.lookY, params.lookZ)
      viewer.controls.target = v
      viewer.camera.lookAt(v)

      viewer.camera.fov = params.fov
      viewer.camera.near = params.near
      viewer.camera.far = params.far
    }

    let params = {
      positionX: 3,
      positionY: 3,
      positionZ: 3,
      lookX: 0,
      lookY: 0,
      lookZ: 0,
      fov: 45,
      near: 1,
      far: 100
    }
    const folder0 = gui.addFolder('相机坐标')
    folder0.add(params, 'positionX').name('坐标X').onChange(updateCamera)
    folder0.add(params, 'positionY').name('坐标Y').onChange(updateCamera)
    folder0.add(params, 'positionZ').name('坐标Z').onChange(updateCamera)
    folder0.open()
    const folder1 = gui.addFolder('视线目标坐标')
    folder1.add(params, 'lookX').name('坐标X').onChange(updateCamera)
    folder1.add(params, 'lookY').name('坐标Y').onChange(updateCamera)
    folder1.add(params, 'lookZ').name('坐标Z').onChange(updateCamera)
    folder1.open()
    const folder2 = gui.addFolder('控制摄像机视角的文件夹')
    folder2.add(params, 'fov', 1, 180).name('相机视角').onChange(updateCamera)
    folder2.add(params, 'near', 1, 200).name('最近可见').onChange(updateCamera)
    folder2.add(params, 'far', 1, 200).name('最远可见').onChange(updateCamera)
    folder2.open()
  })
</script>
